<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>姓名案例_监视属性实现</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>

    <body>
        <!-- vue容器 -->
        <div id="root">
            <input type="text" placeholder="请输入姓：" v-model="firstName"><br><br>
            <input type="text" placeholder="请输入名：" v-model="lastName" ><br><br>
            <input type="text" placeholder="请输入年龄：" v-model="age"> <button v-on:click="addOneAge">点我长大一岁</button><br><br>
            <span>{{fullName}}</span>
        </div>

        <script type="text/javascript">
            const vm = new Vue({
                el:'#root',
                data:{
                   firstName:'杨',
                   lastName:'啟锐',
                   fullName:'test',
                   age:25
                },
                methods: {
                  addOneAge:function(){
                    console.log(this);
                    this.age++
                  },
                
                },
                watch: {
                  //监视属性firstName  
                  firstName:function(var1){
                    setTimeout(() => {
                        this.fullName = var1 + '-' +this.lastName
                    }, 1000);
                  },

                  //监视属性lastName 
                  lastName:function(var1){
                    this.fullName = this.firstName + '-' + var1
                  }
                }
            })
        </script>
    </body>
</html>